//配置路由相关信息
//导入路由
import VueRouter from 'vue-router'
import Vue from 'vue'

//导入路径对应的组件
// import Home from '../components/Home'
// import About from '../components/About'
// import User from '../components/User'

/*
    懒加载写法,一个懒加载对应一个JS文件
    当打包构建应用时,Javascript包会变得非常大,所有代码都被放在一个JS文件中影响页面加载
    路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块
    只有在这个路由被访问到的时候,才加载对应的组件
*/
const Home = () => import('../components/Home')
const About = () => import('../components/About')
const User = () => import('../components/User')
const Profile = () => import('../components/Profile')
// 首页的子组件
const HomeMessage = () => import('../components/HomeMessage')
const HomeNews = () => import('../components/HomeNews')

//1、通过Vue.use(插件),安装插件
Vue.use(VueRouter)

//2、创建VueRouter对象,存储映射关系
const routes = [
    // 让路径默认跳到到首页
    {
        path: '/',
        // 重定向,将根路径重定向到/home的路径下
        redirect: '/home'
    },
    {
        // 一个映射关系就是一个对象
        // 当路径中出现 /home 时,就显示下面对应的组件
        path: '/home',
        component: Home,
        // 元数据: 即描述数据的数据,在需要时可以取用
        meta: {
            title: '首页'
        },
        children: [
            // {
            //     // 嵌套路由配置默认的路径
            //     path: '',
            //     redirect: 'news'
            // },
            {
                 /*
                    实现嵌套路由有两个步骤
                        创建对应的子组件,并且在路由映射中配置对应的子路由
                        在组件内部使用<router-view>标签
                    嵌套路由子组件前不需要加 /
                 */ 
                path: 'news',
                component: HomeNews
            },
            {
                path: 'message',
                component: HomeMessage
            }
        ]
    },
    {
        path: '/about',
        component: About,
        meta: {
            title: '关于'
        },
    },
    {   
        // 传递参数的方式一: params的类型
        // 动态路由,格式是固定的 : 后跟的是自定义的参数名称
        path: '/user/:userId',
        component: User,
        meta: {
            title: '用户'
        },
    },
    {
        path: '/profile',
        component: Profile,
        meta: {
            title: '档案'
        }
    }
]

const router = new VueRouter({
    // 配置路径和组件之间的映射关系
    // routes: [
    // ]
    routes,
    // 改变路径的方式有两种: URL 的 hash 和 HTML5 的 history
    // 默认情况下,路径的改变使用的 URL 的 hash
    // 如果希望使用 HTML5 的 history 模式,进行如下配置,使路径不会出现奇怪的字符
    mode: 'history',
    // 哪个组件处于活跃状态(被点击了),就会给其添加class属性
    linkActiveClass: 'active'
})

/*
导航守卫
    vue-router提供的导航守卫主要用来监听路由的进入和离开的
    vue-router提供了beforeEach和afterEach的钩子函数,它们会在路由即将改变前和改变后触发
前置守卫和后置守卫统称之为全局守卫
还有其他守卫: 路由独享的守卫和组件内的守卫
https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E8%B7%AF%E7%94%B1%E7%8B%AC%E4%BA%AB%E7%9A%84%E5%AE%88%E5%8D%AB

前置守卫(回调函数): 在路由跳转之前进行的回调
    to: 即将要进入的目标的路由对象
    from: 当前导航即将要离开的路由对象
    next: 调用该方法后,才能进入下一个钩子
*/
// router.beforeEach(function(to,from,next){})
router.beforeEach((to,from,next) => {
    //从from跳转到to  to和from即为route中定义的各个路由
    // document.title = to.meta.title
    //当存在嵌套路由时,此时再直接通过meta取就取不到了,因为路径不对,所以可以通过matched取
    // console.log(to)
    document.title = to.matched[0].meta.title
    //必须调用此函数
    next()
})

// 后置守卫(后置钩子): 在路由跳转之后进行的回调,不需要主动调用next()函数
router.afterEach((to,from) => {

})

//3、将router对象传入到Vue实例中
export default router